<template>
  <view class="uni-content">
    <view class="login-logo">
      <image :src="globalConfig.appInfo.logo" mode="widthFix"></image>
    </view>
    <!-- 顶部文字 -->
    <text class="title title-box">账号密码登录</text>
    <uni-forms>
      <uni-forms-item name="username">
        <uni-easyinput
          :focus="focusUsername"
          @blur="focusUsername = false"
          class="input-box"
          :inputBorder="false"
          v-model="username"
          placeholder="请输入手机号/用户名/邮箱"
        />
      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput
          :focus="focusPassword"
          @blur="focusPassword = false"
          class="input-box"
          clearable
          type="password"
          :inputBorder="false"
          v-model="password"
          placeholder="请输入密码"
        />
      </uni-forms-item>
    </uni-forms>
    <view
      class="input-item flex align-center"
      style="width: 60%; margin: 0px"
      v-if="captchaEnabled"
    >
      <view class="flex align-center">
        <view class="iconfont icon-code icon"></view>
        <input
          v-model="loginForm.code"
          type="number"
          class="input"
          placeholder="请输入验证码"
          maxlength="4"
        />
      </view>
      <view class="login-code">
        <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
      </view>
    </view>
    <button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
    <!-- 忘记密码 -->
    <view class="link-box">
      <view>
        <text class="forget">忘记了？</text>
        <text class="link">找回密码</text>
      </view>
      <text class="link" @click="handleUserRegister">注册账号</text>
    </view>
  </view>
</template>

<script>
import { getCodeImg } from "@/api/login";

export default {
  data() {
    return {
      codeUrl: "",
      captchaEnabled: true,
      // 用户注册开关
      register: false,
      globalConfig: getApp().globalData.config,
      loginForm: {
        username: "admin",
        password: "admin123",
        code: "",
        uuid: ""
      },
      password: "",
      username: "",
      focusUsername: false,
      focusPassword: false
    };
  },
  created() {
    this.getCode();
  },
  onShow() {
    // #ifdef H5
    document.onkeydown = (event) => {
      let e = event || window.event;
      if (e && e.keyCode == 13) {
        //回车键的键值为13
        this.pwdLogin();
      }
    };
    // #endif
  },
  methods: {
    // 用户注册
    handleUserRegister() {
      this.$tab.redirectTo(`/pages/register`);
    },
    // 隐私协议
    handlePrivacy() {
      let site = this.globalConfig.appInfo.agreements[0];
      this.$tab.navigateTo(
        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },
    // 用户协议
    handleUserAgrement() {
      let site = this.globalConfig.appInfo.agreements[1];
      this.$tab.navigateTo(
        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },
    // 获取图形验证码
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    // 登录方法
    async handleLogin() {
      if (this.loginForm.username === "") {
        this.$modal.msgError("请输入您的账号");
      } else if (this.loginForm.password === "") {
        this.$modal.msgError("请输入您的密码");
      } else if (this.loginForm.code === "" && this.captchaEnabled) {
        this.$modal.msgError("请输入验证码");
      } else {
        this.$modal.loading("登录中，请耐心等待...");
        this.pwdLogin();
      }
    },
    // 密码登录
    async pwdLogin() {
      this.$store
        .dispatch("Login", this.loginForm)
        .then(() => {
          this.$modal.closeLoading();
          this.loginSuccess();
        })
        .catch(() => {
          if (this.captchaEnabled) {
            this.getCode();
          }
        });
    },
    // 登录成功后，处理函数
    loginSuccess(result) {
      // 设置用户信息
      this.$store.dispatch("GetInfo").then((res) => {
        this.$tab.reLaunch("/pages/index");
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/pages/login/common/login-page.scss";

@media screen and (min-width: 690px) {
  .uni-content {
    height: auto;
  }
  .icon {
    font-size: 18px !important;
  }
  .login-code-img {
    width: 135px !important;
  }
}

.forget {
  font-size: 12px;
  color: #8a8f8b;
}

.link-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}
.flex {
  flex-wrap: nowrap;
}
.link {
  font-size: 12px;
}
.input-item {
  margin: 20px auto;
  background-color: #f5f6f7;
  height: 45px;
  border-radius: 20px;

  .icon {
    font-size: 38rpx;
    margin-left: 10px;
    color: #999;
  }

  .input {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    padding-left: 15px;
  }
}
.login-code {
  height: 38px;
  float: right;

  .login-code-img {
    height: 38px;
    position: absolute;
    margin-left: 10px;
    width: 200rpx;
  }
}
</style>
